<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-12 
 -->


<template>
  <div>
    <div :class="['lyrics-main', lyricName]">
      <div class="lyrics" ref="lyrics" v-if="lyricObj.length" :style="transform">
        <p :class="[isCurLyric(index)]" v-for="(item, index) in lyricObj" :key="index">{{item.txt}}</p>
      </div>
      <div v-else class="lyric-empty">
        <p v-if="lyric">纯音乐，无歌词</p>
        <p v-else>歌词加载中......</p>
      </div>
    </div>
    <div class="lyric-more" v-if="local === 'page' && lyricObj.length > 6">
      <p v-if="!isFull">...</p>
      <span @click.stop="fullLyric">{{ isFull ? '收起' : '展开'}}</span>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { LYRICS } from "@/api";
export default defineComponent({
  name: 'lyrics',
  props: {
    sId: { type: [Number, String], default: 0 },
    currentTime: { type: Number, default: 0 },
    local: { type: String, default: '' }
  },
  setup(props, { emit, slots }) {
    const { info } = initializeData();
    const lyricName = computed(() => [props['local'] === 'page' ? 'page-lyrics' : '', info['isFull'] ? 'fullLyrics' : '']);
    const isCurLyric = computed(() => {
      return (index) => index === info['curIndex'] && !info['local'] ? 'active' : '';
    });
    // 歌词实时滚动
    const transform = computed(() => {
      if (info['curIndex'] > 6) return `transform: translateY(-${30 * (info['curIndex'] - 6)}px)`;
      return 'transform: translateY(0)';
    });
    const getLyrics = async (id) => {
      const { code, lrc } = await LYRICS({ id })
      if (code !== 200) return $message.error('数据请求失败');
      formartLyric(lrc);
    };
    const formartLyric = (lrc) => {
      const lrcReg = /^\[(\d{2}):(\d{2}.\d{2,})\]\s*(.+)$/;
      if (!lrc.lyric) return info['lyric'] = true
      const lyricLis = lrc.lyric.split('\n')
      info['lyric'] = lrc.lyric
      lyricLis.forEach(item => {
        const arr = lrcReg.exec(item)
        if (!arr) return
        info.lyricObj.push({ t: arr[1] * 60 * 1 + arr[2] * 1, txt: arr[3] })
      })
      // 根据时间轴重排顺序
      info.lyricObj.sort((a, b) => a.t - b.t);
    };
    // 页面歌词可以展开查看更多
    const fullLyric = () => {
      info['isFull'] = !info['isFull'];
    };
    onMounted(() => {
      getLyrics(props.sId);
    })
    return {
      ...toRefs(info),
      lyricName,
      isCurLyric,
      transform,
      fullLyric
    }
  }
});
function initializeData() {
  const info = reactive({
    lyric: null,
    lyricObj: [],
    curIndex: 0,
    isFull: false
  });
  return {
    info
  }
}
</script>

<style scoped lang="scss">
.lyrics-main {
  height: 100%;
  max-height: 390px;
  overflow-y: auto;
  transition: all 1.5s ease-in-out;
}

.lyrics {
  font-size: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out;

  /deep/p {
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    font-weight: 300;

    &.active {
      color: $color-theme;
    }
  }
}
.lyric-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  font-size: 14px;
  color: $color-theme;

  ~ .more-lyric {
    display: none;
  }
}
.page-lyrics {
  color: #666;
  overflow: hidden;

  .lyric-empty {
    justify-content: left;
  }

  &.fullLyrics {
    max-height: none;
  }
}

.lyric-more span {
  display: inline-block;
  line-height: 30px;
  cursor: pointer;
  color: $color-theme;
}
</style>
